<template>
  <div class="page">
    <router-link to="/orderlist"  class="bd1 flex-col  justify-center align-center">
      <div class="outer1 flex-row  justify-center align-center">
        <div class="mod1 flex-col"></div>
        <span class="txt1">我的服务</span>
        <span class="txt2">你还没有预约服务哦</span>
        <i class="arrow right"></i>
      </div>
    </router-link>
    <div class="content">
      <router-link to="/itemDetail" class="item">
        <div class="item-content">
          <van-image
              class="item-img"
              fit="contain"
              src="/images/c.png"
          />
          <div class="item-title">日系蕾丝乖巧女仆角色扮演</div>
          <div class="bd4 flex-row">
            <div class="outer2">
              <span class="info2">¥</span> <span class="info3">289</span>
              <span class="txt3">/次</span>
            </div>
            <span class="info4">380人体验</span>
          </div>
        </div>
      </router-link>
      <router-link to="/itemDetail" class="item">
        <div class="item-content">
          <van-image
              class="item-img"
              fit="contain"
              src="/images/a.png"
          />
          <div class="item-title">日系蕾丝乖巧女仆角色扮演</div>
          <div class="bd4 flex-row">
            <div class="outer2">
              <span class="info2">¥</span> <span class="info3">289</span>
              <span class="txt3">/次</span>
            </div>
            <span class="info4">380人体验</span>
          </div>
        </div>
      </router-link>
      <router-link to="/itemDetail" class="item">
        <div class="item-content">
          <van-image
              class="item-img"
              fit="contain"
              src="/images/b.png"
          />
          <div class="item-title">日系蕾丝乖巧女仆角色扮演</div>
          <div class="bd4 flex-row">
            <div class="outer2">
              <span class="info2">¥</span> <span class="info3">289</span>
              <span class="txt3">/次</span>
            </div>
            <span class="info4">380人体验</span>
          </div>
        </div>
      </router-link>
    </div>
    <div class="bd9 flex-col"><span class="word20">查看更多</span></div>
<!--    评价-->
    <div class="bd10 flex-col justify-center align-center">
      <div class="outer4">
        <div class="group4 flex-row justify-center align-center">
          <span class="word21">体验评价</span>
          <router-link to="/comment" class="word22">分享你的体验吧!</router-link>
          <i class="arrow right"></i>
        </div>
        <div class="group5 flex-row justify-between">
          <img
              class="SingleAvatar50"
              referrerpolicy="no-referrer"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="bd11 justify-between">
            <span class="txt10">匿名用户</span>
            <span class="info8">30分钟前</span>
          </div>
        </div>
        <span class="word23"
        >很第一次来他们家很很第一次来他们家很干净很第一次来他们家很干净很第一次来他们家很干净很第一次来他们家很干净干净…</span
        >
        <div class="group6 flex-col"></div>
        <div class="group7 flex-row justify-between">
          <img
              class="SingleAvatar51"
              referrerpolicy="no-referrer"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="box3 justify-between">
            <span class="word24">匿名用户</span>
            <span class="word25">30分钟前</span>
          </div>
        </div>
        <span class="word26"
        >第一次来他们家很干净…</span
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {

}
</script>
<style lang="stylus" scoped>
  .page {
    min-height: 100vh;
    background: #F6F7F9;
    padding 20px 30px
  }
  .arrow {
    width: 10px;
    height: 20px;
    background: url('../assets/image/arrow.svg') 50% 0px no-repeat;
    background-size: cover;
    margin-top 3px
  }
  .content {
    overflow hidden
    margin-left -15px
    margin-right -15px
  }
  .item {
    width: 50%;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px
    float left
  }
  .item-content {

  }
  .item-img {
    width: 332px;
    height: 346px
    border-radius: 10px
    overflow hidden
    background white
  }
  .item-title {
    width: 280px;
    height: 40px;
    font-size: 28px;
    color: #212121;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .bd1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    height: 120px;
    width: 690px;
  }
  .outer1 {
    width: 650px;
    height: 54px;
    padding-left: 20px
  }
  .mod1 {
    width: 55px;
    height: 54px;
    background: url('../assets/image/peach.svg') 0px 0px no-repeat;
    background-size: cover;
  }
  .txt1 {
    width: 120px;
    height: 42px;
    overflow-wrap: break-word;
    color: rgba(33, 33, 33, 1);
    font-size: 30px;
    text-align: left;
    white-space: nowrap;
    line-height: 42px;
    display: block;
    margin: 6px 0 0 10px;
  }

  .txt2 {
    width: 252px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(169, 169, 169, 1);
    font-size: 28px;
    text-align: left;
    white-space: nowrap;
    line-height: 40px;
    display: block;
    margin: 7px 0 0 160px;
  }

  .bd4 {
    width: 690px;
    height: 50px;
    margin-top: 10px;
  }
  .outer2 {
    width: 116px;
    height: 50px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: PingFangSC-Semibold;
    text-align: left;
    line-height: 33px;
  }
  .info2 {
    width: 116px;
    height: 50px;
    overflow-wrap: break-word;
    color: rgba(236, 67, 130, 1);
    font-size: 24px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    line-height: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .info3 {
    width: 116px;
    height: 50px;
    overflow-wrap: break-word;
    color: rgba(236, 67, 130, 1);
    font-size: 36px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 50px;
  }
  .txt3 {
    width: 116px;
    height: 50px;
    overflow-wrap: break-word;
    color: rgba(236, 67, 130, 1);
    font-size: 24px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    line-height: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .info4 {
    overflow-wrap: break-word;
    color: rgba(66, 75, 239, 1);
    font-size: 28px;
    text-align: left;
    white-space: nowrap;
    line-height: 40px;
    display: block;
    margin: 8px 0 0 81px;
  }
  .outer3 {
    width: 116px;
    height: 50px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: PingFangSC-Semibold;
    text-align: left;
    line-height: 33px;
    margin-left: 26px;
  }
  .word5 {
    width: 116px;
    height: 50px;
    overflow-wrap: break-word;
    color: rgba(236, 67, 130, 1);
    font-size: 24px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    line-height: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .word6 {
    width: 116px;
    height: 50px;
    overflow-wrap: break-word;
    color: rgba(236, 67, 130, 1);
    font-size: 36px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 50px;
  }
  .info5 {
    width: 116px;
    height: 50px;
    overflow-wrap: break-word;
    color: rgba(236, 67, 130, 1);
    font-size: 24px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    line-height: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .info6 {
    width: 135px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(66, 75, 239, 1);
    font-size: 28px;
    text-align: left;
    white-space: nowrap;
    line-height: 40px;
    display: block;
    margin: 8px 0 0 81px;
  }
  .flex-col {
    display flex
  }
  .justify-center {
    justify-content: space-between;
  }
  .align-center {
    align-items: center;
  }

  .bd9 {
    background-color: rgba(235, 235, 235, 1);
    border-radius: 22px;
    height: 44px;
    width: 160px;
    margin: 30px 0 0 265px;
    padding: 6px 0 0 32px;
  }
  .word20 {
    width: 96px;
    height: 33px;
    overflow-wrap: break-word;
    color: rgba(138, 138, 138, 1);
    font-size: 24px;
    text-align: right;
    white-space: nowrap;
    line-height: 33px;
    display: block;
  }

  .bd10 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    height: 509px;
    margin-top: 30px;
    width: 690px;
  }
  .outer4 {
    width: 670px;
    height: 469px;
  }
  .group4 {
    width: 650px;
    height: 48px;
    margin-left: 10px;
  }
  .word21 {
    width: 136px;
    height: 48px;
    overflow-wrap: break-word;
    color: rgba(33, 33, 33, 1);
    font-size: 34px;
    font-family: PingFangSC-Semibold;
    text-align: right;
    white-space: nowrap;
    line-height: 48px;
    display: block;
  }
  .word22 {
    width: 206px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(133, 141, 255, 1);
    font-size: 28px;
    text-align: center;
    white-space: nowrap;
    line-height: 40px;
    display: block;
    margin: 4px 0 0 288px;
  }
  .outer5 {
    width: 10px;
    height: 20px;
    margin: 14px 0 0 10px;
  }
  .group5 {
    width: 218px;
    height: 84px;
    margin: 20px 0 0 10px;
  }
  .SingleAvatar50 {
    width: 80px;
    height: 80px;
  }
  .bd11 {
    width: 118px;
    height: 84px;
  }
  .txt10 {
    width: 112px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(33, 33, 33, 1);
    font-size: 28px;
    text-align: left;
    white-space: nowrap;
    line-height: 40px;
    display: block;
  }
  .info8 {
    width: 118px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(169, 169, 169, 1);
    font-size: 28px;
    text-align: left;
    white-space: nowrap;
    line-height: 40px;
    margin-top: 4px;
    display: block;
  }
  .word23 {
    width: 650px;
    height: 80px;
    overflow-wrap: break-word;
    color: rgba(33, 33, 33, 1);
    font-size: 28px;
    text-align: justify;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin: 16px 0 0 10px;
  }
  .group6 {
    background-color: rgba(229, 229, 229, 1);
    width: 670px;
    height: 1px;
    margin-top: 20px;
    margin-left: 10px
    transform: scaleY(0.5);
  }
  .group7 {
    width: 218px;
    height: 84px;
    margin: 20px 0 0 10px;
  }
  .SingleAvatar51 {
    width: 80px;
    height: 80px;
  }
  .box3 {
    width: 118px;
    height: 84px;
  }
  .word24 {
    width: 112px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(33, 33, 33, 1);
    font-size: 28px;
    text-align: left;
    white-space: nowrap;
    line-height: 40px;
    display: block;
  }
  .word25 {
    width: 118px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(169, 169, 169, 1);
    font-size: 28px;
    text-align: left;
    white-space: nowrap;
    line-height: 40px;
    margin-top: 4px;
    display: block;
  }
  .word26 {
    width: 650px;
    height: 80px;
    overflow-wrap: break-word;
    color: rgba(33, 33, 33, 1);
    font-size: 28px;
    text-align: justify;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin: 16px 0 0 10px;
  }
</style>